<template>
  <div class="reportForm">
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="本周">
        <CardBox :cardData="cardData" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="本月" force-render>
        <CardBox :cardData="cardData" />
      </a-tab-pane>
      <a-tab-pane key="3" tab="三个月">
        <CardBox :cardData="cardData" />
      </a-tab-pane>
      <a-tab-pane key="4" tab="全部">
        <CardBox :cardData="cardData" />
      </a-tab-pane>
    </a-tabs>
    <div class="charts">
      <div>
        <span class="chartsLeft">查询时间：</span>
        <a-month-picker
          placeholder="选择查询日期"
          :disabled-date="disabledDate"
          v-model="nowDate"
          @change="onChange"
          style="width: 300px"
        />
      </div>
      <a-row :gutter="4">
        <a-col :xs="24" :sm="24" :md="24" :lg="15" :xl="15">
          <EchartsBasic :histogram="histogram" />
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="9" :xl="9">
          <Pie :pieData="pieData" />
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { CardBox, EchartsBasic, Pie } from "./components";
import {
  getCountData,
  getMemberData,
  getByDisNo,
  disGetData,
  getHistory,
} from "../../services/dataSource.js";
export default {
  name: "reportForm",
  components: { CardBox, EchartsBasic, Pie },

  data() {
    return {
      loading: true,
      cardData: {
        count: 0,
        money: 0,
        commissionAmt: 0,
        cashOutAmt: 0,
        notCashOutAmt: 0,
        member: 0,
      },
      orderData: [],
      totalOrder: 0,
      disNo: "",
      dateMode: "week",
      pieData: [],
      histogram: [],
      nowDate: dayjs(new Date()).format("YYYY-MM"),
      year: dayjs(new Date()).year(),
      month: dayjs(new Date()).month() + 1,
    };
  },
  computed: {},
  watch: {
    pieData(res) {
      this.pieData = res;
    },
    histogram(res) {
      this.histogram = res;
    },
  },
  methods: {
    //禁用月份
    disabledDate(current) {
      return current && current > dayjs().endOf("day");
    },
    //选择月份
    onChange(date, dateString) {
      this.nowDate = dateString;
      this.year = dateString.substr(0, 4);
      this.month = dateString.substr(5, 2);
      this.getHistory();
    },
    callback(key) {
      if (key == 1) {
        this.dateMode = "week";
      }
      if (key == 2) {
        this.dateMode = "month";
      }
      if (key == 3) {
        this.dateMode = "threemonth";
      }
      if (key == 4) {
        this.dateMode = null;
      }
      this.getCount(this.dateMode);
    },
    //获取分销商消费记录和总金额数
    getCount(val) {
      getCountData(this.disNo, val).then((res) => {
        this.cardData.count = res.data.result.count,
        this.cardData.money = res.data.result.money
      });
    },
    //获取会员总数 会员分布
    getMemberData() {
      getMemberData(this.disNo).then((res) => {
        if (res.data.result.length > 0) {
            res.data.result.forEach((item) => {
            this.cardData.member += item.value;
          });
        }
        this.pieData = res.data.result;
      });
    },
    //获取分销商
    getByDisNo() {
      getByDisNo(this.disNo).then((res) => {
        this.cardData.commissionAmt = res.data.result.commissionAmt,
        this.cardData.cashOutAmt = res.data.result.cashOutAmt,
        this.cardData.notCashOutAmt = res.data.result.notCashOutAmt;
      });
    },
    getHistory() {
      getHistory(this.disNo, this.year, this.month).then((res) => {
        this.histogram = res.data.result;
      });
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
    this.disNo = localStorage.getItem("disbNO");
    this.getCount(this.dateMode);
    this.getMemberData();
    this.getByDisNo();
    this.getHistory();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style scoped>
.reportForm {
  /* height: 100vh; */
  background: #fff;
  /* margin-top: 20px; */
}
.charts {
  margin: 20px 20px 0px;
}
.chartsLeft {
  font-size: 18px;
  font-weight: 600;
}
</style>
